<template>
    <el-row class="  mobilenav">
        <el-menu
          :default-active="abs"
          active-text-color="#13A1FF"
           unique-opened="unique-opened" 
          :class="{'mobileShadow':isMobile == true}"
      
          :router='true'
          mode="horizontal"
          >
          <template v-for='item in  routers'> <!--  routers  navdata -->
            <!-- 有下标的导航 item.url是虚拟的，为了不让侧边栏全部都打开-->
            <el-submenu :index="item.url" v-if='item.children' :style='{width:mobileNavWidth}'>
                  <template slot="title">
                        <i class='fas' :class="item.icon"  ></i>
                        <span class='titlespan'>{{item.title}}</span>
                  </template>
                  <!-- 二级目录 -->
                  <template v-for='nav in item.children'>
                        <!-- <router-link :to="nav.url" :key="nav.name"> -->
                            <el-menu-item :index='nav.url' align='left'>
                              <!-- 再加一层template，为了让a标签包裹更大的范围 -->
                                  <template slot='title'> 
                                    <i  :class="nav.icon" class=' ml40 fas fa-sm' ></i>
                                    <span>{{nav.title}}</span>
                                  </template>
                            </el-menu-item>
                  </template>
            </el-submenu> 
            <!-- 无下标的导航 -->
            <!-- <router-link :to="item.url"  v-else> --> <!-- router-link加在外面，为了让a标签扩大范围 -->
            <el-menu-item :index="item.url"  v-else  :style='{width:mobileNavWidth}' >
                            <i class='fas' :class="item.icon"  ></i>
                            <span  class='titlespan'>{{item.title}}</span>
            </el-menu-item>

          </template>
        </el-menu>
        
    </el-row>
  
</template>

<script>

export default {
  name: 'mobileNav',
  props:{
    routers:{
      type:Array,
      default:[]
    },
    isMobile:{
        type:Boolean,
        default:false
    }

  },
  
  data () {
    return {
      
      // navdata:[
      //   {title:'工作台',icon:'home',url:'/homework'},
      //   {title:'业务',  icon: 'stream',url:'/1',children:[{title:'项目',icon:'briefcase',url:'/project'},]},
      // ],
      abs:'',
      isCollapse:false,
      mobileNavWidth:null,
      
      
    }
  },
  created(){
    let path = this.$route.path
    this.currentPath(path)
    this.pageInit()//计算导航宽度
  },
  methods:{
      //解决二级目录刷新 消失问题
      currentPath(path){
          let arr = path.split('/')
           if(arr.length == 3){
              this.abs = '/' + arr[1]
          }
          else{
            this.abs = path
          }
      },
      //计算导航宽度
      pageInit(){
          let length = this.routers.length
          this.mobileNavWidth = (Math.floor((100/length)*10)) /10 + '%'
      }
  },
  mounted(){
    
  },
  watch:{
    //监听路由变化，因为我的消息可以从上导航进
    '$route' (to, from) {
        let path = to.path
        this.currentPath(path)
     },
   
  },
  computed:{
     
  },

}
</script>


<style scoped>
.tac{border-right:1px solid #ddd;}
.el-menu{border-right:0 none;}
.el-menu-item{font-size: 16px;}

.mobileShadow{box-shadow: 0 0 7px rgba(185, 176, 173, 0.4)}


.icon{width: 16px;height: 16px;padding-right: 5px;}

/*移动导航最外层样式  */
.mobilenav{bottom: 0px;left:0;right:0;}
/*只有一级导航 li*/
.mobilenav .el-menu-item{padding:0 10px;line-height: 42px;}
.mobilenav .el-menu-item .titlespan{font-size: 0.8em;position: absolute;left:5px;bottom:-5px;right: 5px;}

/*每个li宽度  不能直接写死，需动态计算*/
/*.mobilenav li{width:14.2%;}*/

.el-submenu__title{padding:0 10px;}

</style>
